
<h1>ui-router</h1>

<h2>directive指令(召唤)ui-view:开启路由，所有视图模块都会被加载到含有ui-view的元素下</h2>
&lt;div ui-view&gt;&lt;/div&gt;

<h2>跳转页面</h2>
<h3>directive指令方式(ui-router)：ui-sref: ui-sref="main(页面)({id:1234(传递参数，参数名与router里配置的一致)})"，直接写在HTML页面上
</h3>
<a ui-sref="main">directive指令方式</a>
<h3>server引用服务方式(攻击)：常被用于需要把跳转动作写在js脚本上</h3>
<p>跳转</p>
<p>$state.go('contact.detail'(router里$stateProvider定义好的id),{id:contact.id},{location:'replace'})</p>
<p>获取参数</p>
<p>$state.params.id&lt;===&gt;$stateParams.id</p>

<h2>directive指令</h2>
<h3>angular.module().directive()</h3>
<h4>directive()里return返回值属性设置</h4>
<h5>restrict: "A(属性形式)E(元素形式)C(class类形式)M(注释形式)"</h5>
<p>常用A(推荐)E，另外的C(class类)M(注释)不推荐使用，类耦合度高，注释如果文件被压缩的话会被清除，进而导致指令失效。</p>
<h5>templateUrl: 定义模板路劲（地址），如果是HTML代码块的话则使用template</h5>
<h5>replace: 布尔值，规定指令所在的标签是否被替换</h5>
<p>当为true时，模板只能有一个根元素；为false时，可以有并列的元素</p>
<h5>transclude(变换):布尔值，处理指令所在的元素拥有子元素的情况，内嵌HTML代码</h5>
<p><img src="images/note/4.png" alt=""/><br /><img src="images/note/5.png" alt=""/></p>
<p>标签替换成我们所编写的HTML模板，但是&lt;hello&gt;标签内部的内容保持不变,而且必须在模板里面定义一个拥有ng-transclude指令的元素，用来存放其标签内部
    的内容</p>
<h5>link: fun,参数常用的有scope(数据绑定，与controller里的$scope类似)、element(调用指令的元素)、attr(根元素上的所有属性)</h5>
<h5>scope:false(默认值)|true|object</h5>
<ul>
    <li>
        <p>false:代表指令里面的scope直接和controller里面所设置好的$scope进行绑定，但是会降低指令的复用性</p>
        <img src="images/note/6.png" alt=""/>
    </li>
    <li>
        <p>true:代表指令scope继承controller的$scope，同时与$scope隔离开来，指令里的scope发生变化的话不会对父级scope造成影响</p>
    </li>
    <li>
        <p>object:{name:val[str]},让指令暴露一组接口，val = &|=|@，val后面如果有接字符串则表示转义接口名</p>
        <ul>
            <li>@:接受字符串</li>
            <li>=:接受变量</li>
            <li>&:接受变量</li>
        </ul>
        <img src="images/note/7.png" alt=""/>
        <p>如果函数要传参的话如下</p>
        <img src="images/note/8.png" alt=""/>
    </li>
</ul>

<h2>数据绑定</h2>
<p>1.直接使用双花括号：{{data}}</p>
<p> 2.指令ng-bind：&lt;div ng-bind="data"&gt;&lt;/div&gt;</p>
<p>3.如果是表单元素使用指令ng-model来实现数据绑定</p>
<h2>指令和控制器的作用域$scope</h2>
<p>指令和控制器分别有自己的作用域，指令相对于控制器的一个子元素</p>
<p>在创建指令时如果定义scope为"="的话代表指令作用域等于控制器作用域，指令和控制器共享一个scope，不过不是完全共享，共享的只是在scope里定义的属性，
    向外面暴露的接口</p>
<p>向外暴露scope接口，可以降低指令和控制器的耦合度,利于指令的复用</p>
<p><img src="images/note/1.png" alt=""/></p>
<p><img src="images/note/2.png" alt=""/></p>
<p><img src="images/note/3.png" alt=""/></p>
<h1>js原生获取DOM</h1>
<pre>
angular不允许在控制器里通过js直接操作DOM对象，但指令里是可以的。直接操作DOM很容易使数据双向绑定失效。
$watch:监控某一数据的变化
$on:接受广播事件的数据
$broadcast:发送广播
$emit:向上广播
$digest:数据双向绑定失效时触发，使数据能够正常同步。
</pre>
<p>在指令里操作DOM时通常会和$digest配合使用，达到数据同步，避免数据绑定失效。</p>

<h1>服务</h1>
<h2>$http</h2>
<p>$http['get', 'post', 'delet', 'put'](url, {data数据对象},{配置})</p>
<P>$http.get('http://www.xxx.com', {params:{id:2,name:'xpl'})</P>
<p>$http({url:'', method:'POST', headers:{'Content-Type':'', 'Accept':''}, params:{})</p>
<h2>$q</h2>
<p>$q.defer():创建延迟加载对象</p>
<p>$q.defer().resolve:函数执行成功时的处理事件</p>
<p>$q.defer().reject:函数执行失败时的处理事件</p>
<p>$q.defer().promise:返回$q的promise</p>
<p>$q.defer().promise.then(fun succee(res){},fun error(error){}):成功或失败时的回调函数</p>
<p>$q.all([fun1,fun2]).then(function(res){}),等待多个进程处理后的同步处理,fun1和fun2执行完后触发then，res是fun1和fun2传递过来的数据，
    是一个数组，小标与函数数组一一对应</p>
<h2>$timeout(fun,time):与js的setTimeout一样</h2>
<h2>$interval(fun,time):与js的setInterval一样</h2>
<h2>$rootScope</h2>
<p>可在页面加载之前定义属性方法，下面的子作用域都会继承其属性和方法，相当于定义公共的属性和方法</p>
<h2>自定义服务</h2>
<p>angular.module('app').service('name',['$cookies'funtion($cookies){}])</p>
<p>在服务上定义方法时是利用this，在this上添加方法例如this.put = function(){}，this是指向当前我们自定义的服务这个对象，相当于我们New了一个服
    务,最后自动把对象作为返回值返回出来</p>
<p>服务返回值也是我们创建自定义服务这个对象</p>
<h2>服务工厂:factory</h2>
<p>angular.module('app').factory('name',['$cookies', function(){}])</p>
<p>与服务不同的是，我们在工厂上要把方法返回出来必须自己return出来,但运用factory来创建服务有个好处就是它允许我们创建服务的私有变量，外面访问不到</p>

<h1>过滤器filter</h1>
<p>过滤器可以使用一个管道字符（|）添加到表达式和指令中。</p>
<h2>内置过滤器</h2>
<p>currency</p>
<dl>
    <dt>
        currency: 格式化数字为货币格式。('$'，0)
        <p>参数1：格式形式</p>
        <p>参数2：小数点位数</p>
    </dt>
    <dd>{{ 250 | currency}} // 结果：$250.00</dd>
    <dd>{{ 250 | currency:"RMB ￥ " }} // 结果：RMB ￥ 250.00</dd>
    <dt>filter: 从数组项中选择一个子集。</dt>
    <dd>
        {{ [{"age": 20,"id": 10,"name": "iphone"},{"age": 12,"id": 11,"name": "sunm xing"},{"age": 44,"id": 12,"name": "test abc"}] | filter:{'name':'iphone'} }}
        <p>查找name为iphone的行</p>
    </dd>
    <dt>lowercase: 格式化字符串为小写。</dt>
    <dt>uppercase: 根据某个表达式排列数组。</dt>
    <dt>
        orderBy: 根据某个表达式排列数组。(key, type)
        <p>参数1(str)：排序依据</p>
        <p>参数2(boolean)：排序是够为降序，默认为false升</p>
        <p>如果想要降序也可以在排序依据钱添加‘-’，如：{{ data | orderBy:'-id' }}</p>
    </dt>
    <dd>{{ [{"age": 20,"id": 10,"name": "iphone"},
        {"age": 12,"id": 11,"name": "sunm xing"},
        {"age": 44,"id": 12,"name": "test abc"}
        ] | orderBy:'id':true }}
        <p>// 根id降序排</p>
    </dd>
    <dd>{{ [{"age": 20,"id": 10,"name": "iphone"},
        {"age": 12,"id": 11,"name": "sunm xing"},
        {"age": 44,"id": 12,"name": "test abc"}
        ] | orderBy:'id'}}
        <p>// 根据id升序排</p>
    </dd>

    <dt>
        data: 时间格式化。
        <p>传入的数据为毫秒数</p>
    </dt>
    <dd>{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25</dd>

    <dt>
        number:  数字格式化（保留小数）。
        <p>格式化后的数字会四舍五入</p>
    </dt>
    <dd>{{149016.1945000 | number:2}}</dd>

    <dt>
        limitTo :  截取。
        <p>传入的数据可以是字符串zz数字也可以是数组</p>
    </dt>
    <dd>{{"1234567890" | limitTo :6}} // 从前面开始截取6位</dd>
    <dd>{{"1234567890" | limitTo:-4}} // 从后面开始截取4位</dd>
    <dd>{{ [1,2,3,4] | limitTo:1}} // 结果: [1]</dd>
</dl>
<p>用法：</p>
<p>{{ data |  lowercase}}: 输出 DATA</p>
<p>&lt;span&gt; ng-bind="data | lowercase" &lt;/span&gt;</p>

<h2>自定义过滤器</h2>
<p>angular.module('app').filter('name',[function(){return function(data[,param1,param2...]){ return data; }]);</p>
<p>利用filter来创建过滤器，返回一个函数，函数的第一个参数就是要过滤的数据，函数里就是数据过滤处理逻辑，最后在函数里还要把过滤完的数据返回出来</p>

<p> 
    <strong>注意：</strong>
    在HTML视图外要运用过滤器时得加上Filter后缀,如图
    <br/>
    <img src="../images/note/9.png" alt=""/>
</p>












